<style>
    #login-button{
        background: #286090!important;
        color: white!important;
        border: 1px solid #286090!important;
        border-radius: 3px;
    }
    .addTag {
        text-decoration: none;
        background: #337ab7;
        color: white;
        padding: 5px 10px;
        border-radius: 4px;
        margin:0 10px;
        display: inline-block;
    }
    .tagList{
        width: 500px;
    }
    .tagList p{
        float: left;
        width: 300px;
        height: 40px;
    }
    .tagList a{
        margin-left: 10px;
    }
    .tagList .tagSpan{
        vertical-align: middle;
        display: inline-block;
        margin-top: 5px;
    }
    .tagSpan span input{
        max-width: 100px;
    }
    .tagList input{
        vertical-align: middle;
    }
    em{
        color: red;
        display: inline-block;
        font-style:normal;
    }
    .tagList em{
        width: 5px;
    }
</style>
<script type="text/javascript" charset="utf-8" src="/ueditor/ueditor.config.js"></script>
<script type="text/javascript" charset="utf-8" src="/ueditor/ueditor.all.min.js"> </script>
<script type="text/javascript" charset="utf-8" src="/ueditor/lang/zh-cn/zh-cn.js"></script>
<script type="text/javascript" src="/My97DatePicker/WdatePicker.js"></script>

<div class="span10">
    <div style="margin-bottom: 20px;">
        <a href="/index/index">首页</a><span >&gt;</span><span>写作机经</span><span >&gt;</span><span>添加/修改</span>
    </div>

    <form name="form" method="post" action="<?php echo baseUrl."/content/write/add"?>" enctype="multipart/form-data">
        <table>
            <tr>
                <td>选择年份:</td>
                <td>
                    <select name="year">
                        <option value ="">请选择年份</option>
                        <option value ="2022" <?php echo isset($data)&& $data['year']==2022 ?  'selected':''?>>2022</option>
                        <option value ="2021" <?php echo isset($data)&& $data['year']==2021 ?  'selected':''?>>2021</option>
                    </select>
                </td>
            </tr>
            <tr>
                <td>选择Part:</td>
                <td>
                    <select name="part">
                        <option value ="">请选择Part</option>
                        <option value ="1" <?php echo isset($data)&& $data['part']==1 ?  'selected':''?>>Part1</option>
                        <option value ="2" <?php echo isset($data)&& $data['part']==2 ?  'selected':''?>>Part2</option>
                    </select>
                </td>
            </tr>
            <tr>
                <td>写作题目:</td>
                <td>
                    <textarea name="question" type="text/plain" id="editor"  style="width: 700px;height: 300px;"><?php echo isset($data)? $data['question']:''?></textarea>
                </td>
            </tr>
            <tr>
                <td>写作答案:</td>
                <td>
                    <textarea name="answer" type="text/plain" id="editor2" style="width: 700px;height: 300px;"><?php echo isset($data)? $data['answer']:''?></textarea>
                </td>
            </tr>
            <tr>
                <td>点击量:</td>
                <td>
                    <input  type="text" name="viewCount" value="<?php echo isset($data)? $data['viewCount']:''?>" />
                </td>
            </tr>

            <tr>
                <td>标签:</td>
                <td>
                    <input  type="text"  id="tag_name" /><a class="addTag" href="javascript:;" onclick="addTag()">添加</a><em>*为共用标签</em>
                    <input type="hidden" value="" name="tags" id="tags">
                </td>
            </tr>
            <tr>
                <td></td>
                <td class="tagList">
                    <?php foreach ($tags as $k=>$v){?>
                    <p><em><?php if($v['id']){?>*<?php }?></em>
                        <input class="tagVal" type="checkbox" value="<?php echo $v['name']?>" <?php echo $v['select']?'checked':''?> />
                        <span class="tagSpan"><span><?php echo $v['name']?></span>
                            <a href="javascript:;" onclick="editTag(this,<?php echo $v['id']?>)">编辑</a>
                            <a href="javascript:;" onclick="delTag(this,<?php echo $v['id']?>)">删除</a>
                        </span>
                    </p>
                    <?php }?>
                </td>
            </tr>

            <tr>
                <td>更新时间：</td>
                <td>
                    <input class="input-small Wdate" onclick="WdatePicker({dateFmt:'yyyy-MM-dd HH:mm:00'})" type="text" style="width: 150px;" name="updateTime" value="<?php echo !empty($data['updateTime']) ? date('Y-m-d H:i:s',$data['updateTime']) : '' ?>"/>
                </td>
            </tr>
            
            <tr>
                <td colspan="2" align="right">
                    <input type="hidden" name='id' value="<?php echo isset($data)? $data['id']:''?>"/>
                    <button type="submit" id="login-button">添加/修改</button></td>
            </tr>
            <input type="hidden" name="_csrf" value="<?=Yii::$app->request->getCsrfToken()?>" />
        </table>
    </form>

</div>

<script type="text/javascript">
    var editor = UE.getEditor('editor');
    var editor2 = UE.getEditor('editor2');
    
    function addTag() {
        var name = $.trim($('#tag_name').val());
        if(!name){
            alert('请输入标签');
            return false;
        }
        $.ajax({
            type: 'POST',
            url: "/content/api/add-tag",
            dataType: "json",
            data: {name:name},
            success: function(res) {
                if(res.code == 1){
                    $('#tag_name').val('');
                    var html = '<p><em>*</em><input class="tagVal" type="checkbox" value="'+name+'" />';
                    html += '<span class="tagSpan"><span>'+name+'</span>';
                    html += '<a href="javascript:;" onclick="editTag(this,'+res.id+')">编辑</a>';
                    html += '<a href="javascript:;" onclick="delTag(this,'+res.id+')">删除</a></span></p>';
                    $('.tagList').append(html)
                }else {
                    alert(res.message)
                }
            },
            error: function(e){
                alert('系统错误，请重试')
            },
        });
    }

    function delTag(obj,id) {
        if(id){
            $.ajax({
                type: 'POST',
                url: "/content/api/delete-tag",
                dataType: "json",
                data: {id:id},
                success: function(res) {
                    if(res.code == 1){
                        $(obj).parents('p').remove();
                        getTags();
                    }else {
                        alert(res.message)
                    }
                },
                error: function(e){
                    alert('系统错误，请重试')
                },
            });
        }else{
            $(obj).parents('p').remove();
            getTags();
        }
    }

    $('.tagList').delegate('input[type="checkbox"]','click',function () {
        var chk_tag = getTags();
        if(chk_tag.length>3){
            $(this).removeAttr("checked");
            getTags();
            alert('最多只能选择三个');
        }
    })
    getTags();

    function getTags() {
        var chk_tag_value = [];
        $('.tagList input[type="checkbox"]:checked').each(function () {
            chk_tag_value.push($(this).val());
        })
        $('#tags').val(chk_tag_value.join(','));
        return chk_tag_value;
    }

    function editTag(obj,id) {
        var name = $(obj).parents('.tagSpan').find('span').text();
        $(obj).parents('.tagSpan').find('span').html('<input type="text" value="'+name+'">');
        $(obj).text('保存');
        $(obj).attr('onclick','saveTag(this,'+id+')')
    }

    function editStatus(obj,id,name) {
        $(obj).parents('p').find('.tagVal').val(name);
        $(obj).parents('.tagSpan').find('span').text(name);
        $(obj).text('编辑');
        $(obj).attr('onclick','editTag(this,'+id+')')
    }

    function saveTag(obj,id) {
        var name = $(obj).parents('.tagSpan').find('span input').val();
        var type = 0;
        if(!id){
            type = 1;
        }
        $.ajax({
            type: 'POST',
            url: "/content/api/add-tag",
            dataType: "json",
            data: {id:id,name:name,type:type},
            success: function(res) {
                if(res.code == 1){
                    editStatus(obj,id,name);
                    getTags();
                }else {
                    alert(res.message)
                }
            },
            error: function(e){
                alert('系统错误，请重试')
            },
        });
    }
</script>